<template>
  <div class="upload-section">
    <div class="upload-card">
      <h2>上传试卷图片</h2>

      <!-- 文章类型选择 -->
      <ExamTypeSelector :selectedType="selectedExamType" @typeChange="handleTypeChange" />

      <div class="upload-area" @dragover.prevent @drop="handleDrop">
        <input type="file" accept="image/*" ref="fileInput" @change="handleFileChange" class="file-input" />
        <div v-if="!file" class="upload-prompt">
          <div class="upload-icon">
            <svg width="48" height="48" viewBox="0 0 24 24">
              <path fill="#3a86ff"
                d="M19.35,10.04C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.04C2.34,8.36 0,10.91 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.04M14,13V17H10V13H7L12,8L17,13H14Z" />
            </svg>
          </div>
          <p>拖放图片到此处或点击上传</p>
          <button class="upload-button" @click="triggerFileInput">选择文件</button>
        </div>
        <div v-else class="file-preview">
          <img :src="filePreview" alt="预览" class="preview-image" v-if="filePreview" />
          <div class="file-info">
            <p>{{ file.name }}</p>
            <p>{{ formatFileSize(file.size) }}</p>
          </div>
          <button class="remove-button" @click="removeFile">移除</button>
        </div>
      </div>
      <button class="recognize-button" :disabled="!file || isProcessing" @click="handleRecognition">
        <span v-if="isProcessing">
          <svg class="spinner" viewBox="0 0 50 50">
            <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
          </svg>
          识别分析中...
        </span>
        <span v-else>开始识别</span>
      </button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import ExamTypeSelector from './ExamTypeSelector.vue';

export default {
  name: 'FileUpload',
  components: {
    ExamTypeSelector
  },
  props: {
    isProcessing: {
      type: Boolean,
      default: false
    }
  },
  emits: ['fileSelected', 'fileRemoved', 'recognize', 'typeChange'],
  setup(props, { emit }) {
    const fileInput = ref(null);
    const file = ref(null);
    const filePreview = ref(null);
    const selectedExamType = ref('cet4_6');

    const triggerFileInput = () => {
      fileInput.value.click();
    };

    const handleFileChange = (e) => {
      const selectedFile = e.target.files[0];
      if (selectedFile) {
        processFile(selectedFile);
      }
    };

    const handleDrop = (e) => {
      e.preventDefault();
      const droppedFile = e.dataTransfer.files[0];
      if (droppedFile) {
        processFile(droppedFile);
      }
    };

    const processFile = (selectedFile) => {
      if (!selectedFile.type.match("image.*")) {
        emit('error', "请上传图片文件");
        return;
      }

      if (selectedFile.size > 5 * 1024 * 1024) {
        emit('error', "文件大小不能超过5MB");
        return;
      }

      file.value = selectedFile;

      const reader = new FileReader();
      reader.onload = (e) => {
        filePreview.value = e.target.result;
      };
      reader.readAsDataURL(selectedFile);

      emit('fileSelected', selectedFile);
    };

    const removeFile = () => {
      file.value = null;
      filePreview.value = null;
      if (fileInput.value) {
        fileInput.value.value = "";
      }
      emit('fileRemoved');
    };

    const formatFileSize = (bytes) => {
      if (bytes === 0) return "0 Bytes";
      const k = 1024;
      const sizes = ["Bytes", "KB", "MB", "GB"];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
    };

    const handleRecognition = () => {
      emit('recognize');
    };

    const handleTypeChange = (type) => {
      selectedExamType.value = type;
      emit('typeChange', type);
    };

    return {
      fileInput,
      file,
      filePreview,
      selectedExamType,
      triggerFileInput,
      handleFileChange,
      handleDrop,
      removeFile,
      formatFileSize,
      handleRecognition,
      handleTypeChange
    };
  }
};
</script>

<style scoped>
.upload-section {
  margin-bottom: 40px;
}

.upload-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(58, 134, 255, 0.15);
  transition: all 0.3s ease;
}

.upload-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.upload-card h2 {
  margin-top: 0;
  margin-bottom: 25px;
  color: #3a86ff;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
}

.upload-area {
  border: 2px dashed #3a86ff;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  margin: 25px 0;
  background: linear-gradient(135deg, rgba(58, 134, 255, 0.05), rgba(131, 56, 236, 0.05));
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.upload-area::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(58, 134, 255, 0.1), transparent);
  transform: rotate(45deg);
  transition: all 0.6s ease;
  opacity: 0;
}

.upload-area:hover {
  background: linear-gradient(135deg, rgba(58, 134, 255, 0.1), rgba(131, 56, 236, 0.1));
  border-color: #2a76ef;
  transform: scale(1.02);
}

.upload-area:hover::before {
  opacity: 1;
  animation: shimmer 1.5s ease-in-out;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }

  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.file-input {
  display: none;
}

.upload-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.upload-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(58, 134, 255, 0.1), rgba(131, 56, 236, 0.1));
  border-radius: 50%;
  transition: all 0.3s ease;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.upload-area:hover .upload-icon {
  background: linear-gradient(135deg, rgba(58, 134, 255, 0.2), rgba(131, 56, 236, 0.2));
  transform: scale(1.1);
}

.upload-prompt p {
  color: #555;
  font-size: 1.1rem;
  margin: 0;
  font-weight: 500;
}

.upload-button {
  background: linear-gradient(135deg, #3a86ff, #8338ec);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(58, 134, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.upload-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.upload-button:hover {
  background: linear-gradient(135deg, #2a76ef, #7238d4);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(58, 134, 255, 0.4);
}

.upload-button:hover::before {
  left: 100%;
}

.file-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.preview-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.preview-image:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.file-info {
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.file-info p {
  margin: 5px 0;
  color: #555;
}

.file-info p:first-child {
  font-weight: 600;
  color: #333;
  font-size: 1rem;
}

.file-info p:last-child {
  font-size: 0.9rem;
  color: #666;
}

.remove-button {
  background: linear-gradient(135deg, #ff6b6b, #ff5252);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.remove-button:hover {
  background: linear-gradient(135deg, #ff5252, #f44336);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.recognize-button {
  display: block;
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #8338ec, #6f42c1);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 25px;
  box-shadow: 0 6px 20px rgba(131, 56, 236, 0.3);
  position: relative;
  overflow: hidden;
}

.recognize-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.recognize-button:not(:disabled):hover {
  background: linear-gradient(135deg, #7238d4, #5a2d91);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(131, 56, 236, 0.4);
}

.recognize-button:not(:disabled):hover::before {
  left: 100%;
}

.recognize-button:disabled {
  background: linear-gradient(135deg, #cccccc, #999999);
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.recognize-button span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* 加载动画 */
.spinner {
  animation: rotate 2s linear infinite;
  width: 24px;
  height: 24px;
  display: inline-block;
}

.spinner .path {
  stroke: white;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .upload-card {
    padding: 20px;
    margin: 0 10px;
  }

  .upload-card h2 {
    font-size: 1.5rem;
  }

  .upload-area {
    padding: 30px 15px;
  }

  .upload-icon {
    width: 60px;
    height: 60px;
  }

  .upload-prompt p {
    font-size: 1rem;
  }

  .preview-image {
    max-height: 200px;
  }

  .recognize-button {
    font-size: 1.1rem;
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .upload-card {
    padding: 15px;
    border-radius: 12px;
  }

  .upload-area {
    padding: 25px 10px;
  }

  .upload-icon {
    width: 50px;
    height: 50px;
  }

  .upload-prompt p {
    font-size: 0.9rem;
  }

  .upload-button {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}
</style>